<template>
    <el-link v-if="stype == 'link'" v-bind="$attrs" class="st-el-button-inner"
               :type="$attrs.type || computedTypeAndIcon.type"
                :disabled="(loading || localLoading)? true : $attrs.disabled"
               :icon="(loading || localLoading)? 'el-icon-loading' : ($attrs.icon || computedTypeAndIcon.icon)"
                @click="click" ><slot></slot></el-link>
    <el-button v-else v-bind="$attrs"
               :type="$attrs.type || computedTypeAndIcon.type"
               :icon="$attrs.icon || computedTypeAndIcon.icon"
               size="mini" @click="click" :loading="loading || localLoading"><slot></slot></el-button>
</template>

<script>
    export default {
        name: "StElButton",
        props: {
            stype: String,
            // 地址,导航时支持数字主要用于返回
            url: {
                type: [String,Number],
            },
            // 请求后台有效
            method: String,
            // 参数
            params: {
                type: Object,
                default: function () {
                    return {}
                }
            },
            loading: {
                type: Boolean,
                default: false
            },
            // 确认提示文本
            confirmText:{
                type: String
            }
        },
        computed:{
            computedTypeAndIcon(){
                let r = {}
                if(this.$slots.default && this.$slots.default.length > 0 && this.$slots.default[0].text){
                    r = this.$stElStyleTools.aiButtonStyle(this.$slots.default[0].text)
                }
                return r
            }
        },
        data(){
            return {
                localLoading: false
            }
        },
        methods:{
            click(){
                if(this.url && this.method){
                    if(this.confirmText){
                        this.$confirm(this.confirmText, '提示', {
                            type: 'warning'
                        }).then(() => {
                            this.doClick()
                        })
                    }else {
                        this.doClick()
                    }
                }
                this.$emit('click')
            },
            doClick() {
                this.localLoading = true
                this.$emit('loading',true)
                let options = {
                    method: this.method,
                    url: this.url,
                }
                if ('get' == options.method) {
                  options.params = this.params || {}
                }else {
                  options.data = this.params || {}
                }
                this.axios(options)
                    .then(res=>{
                        this.$emit('requestSuccess',res.data)
                    }).catch(error=>{
                        this.$emit('requestError',error)
                        if(error.response){
                            if(error.response.data && error.response.data.errorMsg){
                                this.$message.error(error.response.data.errorMsg)
                            }
                        }else {
                            this.$message.error('网络错误或服务不可用')
                        }
                }).finally(()=>{
                    this.localLoading = false
                    this.$emit('loading',false)
                })
            }
        }
    }
</script>

<style scoped>
</style>

<style>
    /* 在表格中是图标和文本没有对齐 */
    .st-el-button-inner span.el-link--inner{
        line-height: 1;

    }
</style>